<template>
  <div>
    <el-container>
      <el-header>
        <el-row
          ><el-col :span="2"> 客户开发计划 </el-col
          ><el-col :span="6" :offset="13">
            制定客户开发计划和记录开发进度
          </el-col></el-row
        >
      </el-header>
      <el-main>
        <el-table :data="tableData" style="width: 100%" border stripe>
          <el-table-column
            prop="ChanName"
            label="客户名称"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanTitle"
            label="概要"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanLinkMan"
            label="联系人"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanLinkTel"
            label="联系电话"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanCreateDate"
            label="创建时间"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ operatingTime(scope.row.ChanCreateDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="149" align="center">
            <template slot-scope="scope">
              {{
                scope.row.ChanState == 1
                  ? "未开发"
                  : scope.row.ChanState == 2
                  ? "开发中"
                  : scope.row.ChanState == 3
                  ? "开发成功"
                  : "开发失败"
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="179" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="fptp(scope.row)"
                :type="
                  scope.row.ChanState == 1
                    ? 'info'
                    : scope.row.ChanState == 2
                    ? 'warning'
                    : scope.row.ChanState == 3
                    ? 'success'
                    : 'danger'
                "
              >
                <i
                  :class="
                    scope.row.ChanState == 1
                      ? 'el-icon-warning'
                      : scope.row.ChanState == 2
                      ? 'el-icon-loading'
                      : scope.row.ChanState == 3
                      ? 'el-icon-success'
                      : 'el-icon-error'
                  "
                ></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row>
          <el-col :span="1">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rows"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <!--开发状态失败-->
    <el-dialog
      title="开发计划查看(状态:开发失败)"
      :visible.sync="dialogVisiblesb"
      width="50%"
    >
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item
          label="失败原因"
          labelStyle="text-align:center;font-weight:900;color:red;"
          contentStyle="text-align:center;font-size:1px;"
        >
          {{ tableData2 }}
        </el-descriptions-item>
      </el-descriptions>

      <el-table :data="tableData1" style="width: 100%">
        <el-table-column
          label="计划时间"
          min-width="100"
          prop="PlanDate"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ operatingTime(scope.row.PlanDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="计划内容"
          min-width="100"
          prop="PlanContent"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="执行时间"
          min-width="100"
          prop="PlanResultDate"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ operatingTime(scope.row.PlanResultDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="执行内容"
          min-width="100"
          prop="PlanResult"
          align="center"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--开发状态成功-->
    <el-dialog
      title="开发计划查看(状态:开发成功)"
      :visible.sync="dialogVisiblecg"
      width="50%"
    >
      <el-table :data="tableData1" style="width: 100%">
        <el-table-column
          label="计划时间:"
          min-width="100"
          prop="PlanDate"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ operatingTime(scope.row.PlanDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="计划内容:"
          min-width="100"
          prop="PlanContent"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="执行时间:"
          min-width="100"
          prop="PlanResultDate"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ operatingTime(scope.row.PlanResultDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="执行内容:"
          min-width="100"
          prop="PlanResult"
          align="center"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--开发中-->
    <el-dialog
      title="开发计划查看(状态:开发中)"
      :visible.sync="dialogVisiblekfz"
      width="50%"
    >
      <!--操作按钮-->
      <el-row>
        <el-col :span="10">
          <el-button type="primary" plain @click="duv">新建</el-button>
          <el-button type="success" plain @click="upcg">开发成功</el-button>
          <el-button type="danger" plain @click="sbmtk"
            >开发终止</el-button
          ></el-col
        >
      </el-row>
      <el-row>
        <!--计划-->
        <el-col :span="1" :offset="-2">
          <el-form
            ref="formjh"
            :model="formjh"
            :rules="formrulejh"
            label-width="50%"
          >
            <div class="wz" :style="divzx">
              <el-form-item
                label="计划:"
                style="width: 110px"
                prop="PlanContent"
              >
                <el-input
                  type="textarea"
                  v-model="formjh.PlanContent"
                  style="width: 670px"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="margin-left: 500px"
                  @click="duv1('formjh')"
                  >保存</el-button
                >
              </el-form-item>
            </div>
            <!--执行-->
            <div class="wz" :style="divzx1">
              <el-form-item
                label="执行:"
                style="width: 110px"
                prop="PlanResult"
              >
                <el-input
                  type="textarea"
                  v-model="formjh.PlanResult"
                  style="width: 670px"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="margin-left: 500px"
                  @click="inserjh('formzx')"
                  >保存</el-button
                >
              </el-form-item>
            </div>
          </el-form>
        </el-col>
        <el-col :span="1" :offset="-2">
          <div class="wz" :style="divzx1"></div>
        </el-col>
      </el-row>
      <!--开发终止-->
      <el-row>
        <!--计划-->
        <el-col :span="1" :offset="-2">
          <div class="wz" :style="divzx2">
            <el-form
              ref="formzj"
              :model="formzj"
              :rules="formrulezj"
              label-width="50%"
            >
              <el-form-item label="原因:" style="width: 110px" prop="ChanError">
                <el-input
                  type="textarea"
                  v-model="formzj.ChanError"
                  style="width: 670px"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="margin-left: 500px"
                  @click="sbtj('formzj')"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <!--计划表数据-->
      <el-table :data="tableData1" style="width: 100%">
        <el-table-column
          label="计划时间"
          min-width="100"
          prop="PlanDate"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ operatingTime(scope.row.PlanDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="计划内容"
          min-width="100"
          prop="PlanContent"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="执行时间"
          min-width="100"
          prop="PlanResultDate"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ operatingTime(scope.row.PlanResultDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="执行内容"
          min-width="100"
          prop="PlanResult"
          align="center"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  feye,
  kfzt,
  jhcx,
  jhtj,
  cgxg,
  sbxg,
  sbcx,
  khtj,
  khtjcx,
  insed,
  cuid,
} from "../http/user.js";
import qs from "qs";
export default {
  data() {
    return {
      //每页显示数
      pageSize: 3,
      //当前页
      currentPage: 1,
      //总行数
      rows: 1,
      //计划隐藏
      divzx: "display: none;",
      //执行隐藏
      divzx1: "display: none;",
      //开发终止隐藏
      divzx2: "display: none;",
      //销售分页数据
      tableData: [],
      //计划表数据
      tableData1: [],
      //原因查询
      tableData2: "",
      //失败模态框
      dialogVisiblesb: false,
      //成功模态框
      dialogVisiblecg: false,
      //开发中模态框
      dialogVisiblekfz: false,
      //计划表单数据
      formjh: {
        ChanID: "",
        ChanName: "",
        ChanCreateMan: "",
        PlanContent: "",
        PlanResult: "",
      },
      formrulejh: {
        PlanContent: [
          { required: true, message: "请输入计划内容", trigger: "blur" },
        ],
        PlanResult: [
          { required: true, message: "请输入执行内容", trigger: "blur" },
        ],
      },
      formzj: {
        ChanError: "",
      },
      formrulezj: {
        ChanError: [
          { required: true, message: "请输入失败原因", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //订单添加
    tjd(row) {
      cuid({
        params: {
          id: row,
        },
      })
        .then((res) => {
          console.log(res);
          insed({
            params: {
              id: res.Data.CusID,
            },
          })
            .then((res) => {
              console.log(res);
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //日期格式
    operatingTime(timeDate) {
      return this.$moment(timeDate).format("YYYY-MM-DD");
    },
    //失败原因添加
    sbtj() {
      sbxg({
        params: {
          id: this.formjh.ChanID,
          nr: this.formzj.ChanError,
        },
      })
        .then((res) => {
          console.info(res);
          if (res.Data == 1) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.dialogVisiblekfz = false;
            this.sx();
          }
        })
        .catch((err) => {
          console.info(err);
        });
    },
    //失败原因窗口打开
    sbmtk() {
      this.divzx1 = "display: none;";
      this.divzx = "display: none;";
      this.divzx2 = "display: block;";
    },
    //开发成功修改
    upcg() {
      jhcx({
        params: {
          id: this.formjh.ChanID,
        },
      })
        .then((res) => {
          console.info(res);
          if (res.Row == 0) {
            this.$message({
              message: "还没有计划内容,请先新建计划内容",
              type: "warning",
            });
          } else {
            cgxg({
              params: {
                id: this.formjh.ChanID,
              },
            })
              .then((res) => {
                console.info(res);
                if (res.Data == 1) {
                  khtjcx({
                    params: {
                      name: this.formjh.ChanName,
                    },
                  })
                    .then((res) => {
                      console.info(res);
                      if (res.Row == 0) {
                        khtj({
                          params: {
                            id: this.formjh.ChanCreateMan,
                            name: this.formjh.ChanName,
                          },
                        })
                          .then((res) => {
                            console.info(res);
                            if (res.Message == "添加成功") {
                              this.$message({
                                message: "新增成功",
                                type: "success",
                              });
                              this.tjd(this.formjh.ChanName);
                            }
                          })
                          .catch((err) => {
                            console.info(err);
                          });
                      }
                    })
                    .catch((err) => {
                      console.info(err);
                    });
                  this.dialogVisiblekfz = false;
                  this.sx();
                }
              })
              .catch((err) => {
                console.info(err);
              });
          }
        })
        .catch((err) => {
          console.info(err);
        });
    },
    //执行添加
    inserjh() {
      if (this.formjh.PlanResult != "") {
        jhtj(qs.stringify(this.formjh))
          .then((res) => {
            console.info(res);
            if (res.Message == "添加数据成功") {
              this.divzx1 = "display: none;";
              this.divzx = "display: none;";
              this.$message({
                message: "新增成功",
                type: "success",
              });
              jhcx({
                params: {
                  id: this.formjh.ChanID,
                },
              })
                .then((res) => {
                  console.info(res);
                  this.tableData1 = res.Data;
                })
                .catch((err) => {
                  console.info(err);
                });
            }
          })
          .catch((err) => {
            console.info(err);
          });
      } else {
        this.$message({
          message: "请填写完执行内容",
          type: "error",
        });
        return false;
      }
    },
    //添加点击显示
    duv() {
      this.divzx2 = "display: none;";
      this.divzx = "display: block;";
    },
    //计划保存显示
    duv1() {
      if (this.formjh.PlanContent != "") {
        this.divzx1 = "display: block;";
        this.divzx = "display: none;";
      } else {
        this.$message({
          message: "请填写完计划内容",
          type: "error",
        });
        return false;
      }
    },
    //销售计划表查询方法
    ztff(row) {
      jhcx({
        params: {
          id: row,
        },
      })
        .then((res) => {
          console.info(res);
          this.tableData1 = res.Data;
        })
        .catch((err) => {
          console.info(err);
        });
    },
    //操作点击事件
    fptp(row) {
      this.formjh.ChanID = row.ChanID;
      this.formjh.ChanName = row.ChanName;
      this.formjh.ChanCreateMan = row.ChanCreateMan;
      if (row.ChanState == 1) {
        (this.divzx = "display: none;"),
          (this.divzx1 = "display: none;"),
          (this.divzx2 = "display: none;"),
          this.$message({
            message: "该计划还没被分配,请先去分配",
            type: "warning",
          });
      } else if (row.ChanState == 2) {
        (this.divzx = "display: none;"),
          (this.divzx1 = "display: none;"),
          (this.divzx2 = "display: none;"),
          (this.dialogVisiblekfz = true);
        this.ztff(row.ChanID);
      } else if (row.ChanState == 3) {
        (this.divzx = "display: none;"),
          (this.divzx1 = "display: none;"),
          (this.divzx2 = "display: none;"),
          (this.dialogVisiblecg = true);
        this.ztff(row.ChanID);
      } else if (row.ChanState == 4) {
        (this.divzx = "display: none;"),
          (this.divzx1 = "display: none;"),
          (this.divzx2 = "display: none;"),
          (this.dialogVisiblesb = true);
        sbcx({
          params: {
            id: row.ChanID,
          },
        })
          .then((res) => {
            console.info(res);
            this.tableData2 = res.Data[0].ChanError;
          })
          .catch((err) => {
            console.info(err);
          });
        this.ztff(row.ChanID);
      }
    },
    //销售分页方法
    sx() {
      feye({
        params: {
          i: this.currentPage,
          j: this.pageSize,
        },
      })
        .then((res) => {
          console.info(res);
          this.tableData = res.Data;
          this.rows = res.Row;
        })
        .catch((err) => {
          console.info(err);
        });
      //开发状态查询
      kfzt()
        .then((res) => {
          this.tableData1 = res.Data;
        })
        .catch((err) => {
          console.info(err);
        });
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.sx();
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.sx();
    },
  },
  mounted() {
    this.sx();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  border-radius: 15px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border: solid 5px white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}
.el-col-2 {
  width: 8.33333%;
  font-size: 17px;
  font-weight: 900;
}
.el-col-6 {
  width: 37.5%;
  font-size: 1px;
  font-weight: 300;
  color: rgb(83, 83, 83);
}
.wz {
  background: 0px;
  width: 295px;
  padding-top: 50px;
}
</style>
